import Link from "next/link";
import type { Metadata } from "next";
import { Timeline } from "@/components/timeline";
import { Chip, Empty, PageHeader, Panel, Table, Td } from "@/components/ui";
import { api } from "@/lib/api";
import { relTime } from "@/lib/format";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ domain: string }> }): Promise<Metadata> {
  const { domain } = await params;
  return { title: `${domain} — domain timeline`, description: `Monitored URLs and detected changes on ${domain}.`, alternates: { canonical: `/domain/${domain}` } };
}

export default async function DomainPage({ params, searchParams }: { params: Promise<{ domain: string }>; searchParams: Promise<{ cursor?: string }> }) {
  const { domain } = await params;
  const { cursor } = await searchParams;
  const d = await api.domain(domain, cursor);
  return (
    <>
      <PageHeader kicker="Domain" title={<span className="font-mono">{domain}</span>} description="Every monitored URL on this domain with its history, plus the event timeline." actions={d?.source_id ? <Link href={`/source/${d.source_id}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Source page →</Link> : undefined} />
      <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
        <Panel title={`URLs · ${d?.urls.length ?? 0}`} dense>
          {d?.urls.length ? (
            <Table head={["URL", "Status", "Snapshots", "Changes", "Last seen"]}>
              {d.urls.map((u) => (
                <tr key={u.url}>
                  <Td><Link href={`/url?u=${encodeURIComponent(u.url)}`} className="block max-w-[26rem] truncate font-mono text-[11.5px] hover:underline">{u.url.replace(/^https?:\/\//, "")}</Link></Td>
                  <Td><Chip tone={u.status === "active" ? "ok" : u.status === "removed" ? "danger" : "warn"}>{u.status}</Chip></Td>
                  <Td mono>{u.snapshot_count}</Td>
                  <Td mono>{u.change_count}</Td>
                  <Td mono className="text-fg-subtle">{relTime(u.last_seen_at)}</Td>
                </tr>
              ))}
            </Table>
          ) : (
            <Empty>No URLs monitored on this domain yet.</Empty>
          )}
        </Panel>
        <Panel title="Timeline" dense>
          <Timeline events={d?.events ?? []} />
          {d?.nextCursor && (
            <div className="flex justify-end px-3 py-2 text-[12px]">
              <Link href={`/domain/${domain}?cursor=${encodeURIComponent(d.nextCursor)}`} className="rounded-md border border-line bg-panel-2 px-2.5 py-1 hover:border-line-strong">Older →</Link>
            </div>
          )}
        </Panel>
      </div>
    </>
  );
}